<template>
  <div class="page">
    <el-form class="login-form" ref="form" label-width="100" :model="model" :rules="rules">
      <h1>Login</h1>
      <el-form-item label="Username" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>
      <el-form-item label="VerifyCode" class="captcha" prop="verifyCode">
        <el-input class="captcha__input" v-model="model.verifyCode" @keyup.enter="handleLogin" />
        <Captcha ref="captcha" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleLogin">
          Login
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from "element-plus"
import Captcha from "./components/captcha.vue"

export default {
  name: "login",

  components: {
    Captcha,
  },

  data() {
    return {
      // 是否正在登录中
      loading: false,
      // 表单数据
      model: {
        // 用户名
        username: "admin",
        // 密码
        password: "123456",
        // 验证码
        verifyCode: "",
      },
      // 表单规则
      rules: {
        username: [{ required: true, message: "请输入" }],
        password: [
          { required: true, message: "请输入" },
          { min: 6, message: "最少6位" },
        ],
        verifyCode: [{ required: true, message: "请输入" }],
      },
    }
  },

  methods: {
    async handleLogin() {
      await this.$refs.form.validate()
      // 表单校验成功
      // 组装登录接口需要的参数
      const params = {
        ...this.model,
        // 获取 captchaId 通过 ref 绑定 captcha 组件
        captchaId: this.$refs.captcha.captchaId,
      };
      try {
        // 防重点击
        this.loading = true
        // 派发 user/login 动作
        const data = await this.$store.dispatch("user/login", params)
        // 派发 user/getPerson 动作
        //    移动到全局前置守卫中调用
        // await this.$store.dispatch("user/getPerson")
        // Success
        ElMessage({
          type: "success",
          message: "登录成功",
          duration: 1000,
          onClose: () => {
            // 消息关闭时的回调函数
            // 跳转页面
            const redirect = this.$route.query.redirect || "/"
            this.loading = false
            this.$router.replace(redirect)
          },
        })
      } catch (error) {
        // 登录错误处理
        this.loading = false
        // 1. 清空验证码输入框
        this.model.verifyCode = ""
        // 2. 验证码刷新
        this.$refs.captcha.refresh()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}
h1{
  text-align: center;
  margin-bottom: 20px;
}
.login-form {
  padding: 16px;
  box-sizing: border-box;
  width: 360px;
  border-radius: 5px;
  box-shadow: 0 0 10px pink;
  background-color: #fff;
}


.captcha {
  ::v-deep(.el-form-item__content) {
    justify-content: space-between;
  }

  &__input {
    width: 70px;
  }
}
</style>
